<template>
	<view class="skill">
		<view class="box"  v-if="skillwrod.length>0">
			<text class="name">个人技能</text>
			<view class="content" >
				<block v-for="(item,index) in skillwrod" :key="index">
					<view class="text">{{item}}</view>
				</block>
			</view>
		</view>
		<!-- 图标展示 -->
		<text class="title" v-if="list.length>0">技能介绍</text>
		<view class="progress" v-if="list.length>0">
			<scroll-view scroll-y="true" style="height: 100%;" >
				<view class="wrap">
					<block v-for="(item,index) in list" :key="index">
						<view class="progress-box">
							<text>{{(index+1)+'、'}}{{item.content}}</text>
						</view>
					</block>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				skillList: this.$store.state.skillList,
				skillwrod: this.$store.state.skillwrod
			}
		},
		async onLoad() {
			// const res = await this.$api('user',{type:"skill"});
			// this.list = res.result.data[0].content;
		},
		computed: {
			list(){
				return this.skillList.filter(item=>item.content !='')
			}
		}
	}
</script>

<style lang="scss">
		page{
			height: 100%;
		}
	.skill{
		width: 100%;
		height: 100%;
		// overflow: auto;
		box-sizing: border-box;
		padding-top: 30rpx;
		background-color: #eee;
		display: flex;
		flex-direction: column;
		.box{
			width: 94%;
			margin: 0 auto;
			box-sizing: border-box;
			padding: 20rpx;
			border-radius: 12rpx;
			background-color: #fff;
			font-size: 32rpx;
			.name{
				font-weight: bold;
				font-size: 36rpx;
			}
			.content{
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				background: #eee;
				padding: 20rpx;
				margin-top: 20rpx;
				.text{
					padding: 10rpx 20rpx ;
					margin: 10rpx;
					background-color: #fff;
					border-radius: 12rpx;
					box-shadow: 0 0 8rpx #000;
				}
			}
		}
		.title{
			width: 94%;
			background: #fff;
			// height: 40rpx;
			// line-height: 40rpx;
			box-sizing: border-box;
			padding: 20rpx 20rpx 10rpx;
			border-radius: 12rpx 12rpx 0 0;
			margin: 20rpx auto 0;
			font-weight: bold;
			font-size: 36rpx;
		}
		.progress{
			
			flex: 1;
			overflow: auto;
			
			.wrap{
				width: 94%;
				margin: 0 auto 20rpx;
				background-color: #fff;
				border-radius:0 0 12rpx 12rpx;
				box-sizing: border-box;
				padding: 20rpx 20rpx ;
			}
		}
	}
</style>
